<template>
  <div class="mb-20 bg-white">
    <NavBar />
    <div class="flex justify-center">
      <div class="pb-20" style="margin-top:79px;">
        <div class="container-width">
          <div class="flex flex-row  w-full">
            <MineLeftNav />
            <div class="flex-1 flex w-full ">
              <div class="flex flex-col flex-col w-full">
                <div class="h-48 flex flex-col items-center pl-5 text-sm bg-[#F9F9F9]">
                  <div class="touxiang mt-6">
                    <img src="../../assets/avatar.png">
                  </div>
                  <div class="dianhua mt-3">
                    {{ this.currentUserInfo.phonenumber }}
                  </div>
                  <div class="topbtn flex flex-row mt-4">
                    <div class="xiugaibtn mr-5 pl-4 pr-4 pt-2 pb-2 bg-[#FE7743] text-[#FFFFFF]">
                      <div class="w-16 flex justify-center" @click="dialogVisible = true" style="cursor: pointer;">修改密码</div>
                    </div>
                    <div class="tuichubtn pl-4 pr-4 pt-2 pb-2 bg-[#212A41] text-[#FFFFFF] ">
                      <div @click="logout" style="cursor: pointer;">退出登陆</div>
                    </div>
                  </div>
                </div>
                <div class="flex flex-row mt-4">
                  <div class=" bg-[#F9F9F9] flex-1">
                    <div class="h-[32px] px-4 flex flex-row items-center border-b border-[#E0E0E0]">
                      <div class="text-sm">
                        关注第1园区微信公众号
                      </div>
                      <div class="text-sm ml-2 px-2 text-[#FE7743] border border-[#FE7743]">
                        你还未关注
                      </div>
                    </div>
                    <div class="ml-4 pt-11 px-6 text-[#FE7743] text-sm">
                      系统检测到您末关注第1园区微信公众号，将无法获取咨询通知，请扫码关注
                      
                    <img src="/static/img/weixin.81e785b6.jpg" style="width: 100%;height: auto;padding: 20px;">
                    </div>
                  </div>
                  <div class="h-48 ml-4 bg-[#F9F9F9] flex-1">
                    <div class="h-[32px] px-4 flex flex-row items-center border-b border-[#E0E0E0]">
                      <div class="text-[10px]" style="width: 86px;">
                        更换绑定手机号
                      </div>
                      <div class="text-[10px] ml-2 px-2 text-[#FE7743] border border-[#FE7743]" >
                        {{ this.currentUserInfo.phonenumber }}
                      </div>
                      <div class="text-[10px] ml-8 h-5 w-20 text-center bg-[#FE7743] text-[#FFFFFF]">
                        <div @click="EditMobileDialogVisible = true" style="cursor: pointer;">更改手机号</div>
                      </div>
                    </div>
                    <div class="h-44 ml-4 pt-11 px-6 text-[#FE7743] text-[10px] ">
                      重要提示 更换绑定的手机号必须使用未在第1园区平台注册过的手机号，更换手机号之后，
                      会同时自动解绑微信，您需要从新绑定微信
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          title="修改登录密码"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <el-form ref="EditPasswordForm" :model="PasswordForm" :rules="EditPasswordRules" class="edit-password-form" autocomplete="on" label-position="left">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="PasswordForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                placeholder="请输入验证码"
                v-model="PasswordForm.code">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <el-button slot="append" @click="sendEditPasswordCode" style="cursor: pointer;">{{isWait?`等待${sendWaitTime}秒`:'发送验证码'}}</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input v-model="PasswordForm.password"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" style="cursor: pointer;">取 消</el-button>
            <el-button type="primary" @click="updatePassword" style="cursor: pointer;">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="更换绑定手机号"
          :visible.sync="EditMobileDialogVisible"
          width="30%"
          :before-close="handleEditMobileClose">
          <el-form ref="EditPasswordForm" :model="MobileForm" :rules="EditMobileRules" class="edit-password-form" autocomplete="on" label-position="left">
            <el-form-item label="旧手机" prop="phonenumber">
              <el-input v-model="MobileForm.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                placeholder="请输入验证码"
                v-model="MobileForm.code">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <el-button slot="append" @click="sendOldMobileCode" style="cursor: pointer;">{{isWait?`等待${sendWaitTime}秒`:'发送验证码'}}</el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="新手机" prop="newphonenumber">
              <el-input v-model="MobileForm.newphonenumber"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="newcode">
              <el-input
                placeholder="请输入验证码"
                v-model="MobileForm.newcode">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <el-button slot="append" @click="sendNewMobileCode" style="cursor: pointer;">{{isWait?`等待${sendWaitTime}秒`:'发送验证码'}}</el-button>
              </el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="EditMobileDialogVisible = false" style="cursor: pointer;">取 消</el-button>
            <el-button type="primary" @click="updateMobile" style="cursor: pointer;">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue"
import MineLeftNav from '@/components/MineLeftNav'
import { getInfo, editPassword, editPhone, sendCode } from '@/api/user'
import { removeToken } from '@/utils/auth'

export default {
  data() {
    return {
      dialogVisible: false,
      currentUserInfo: {},
      PasswordForm: {
        phonenumber: '',
        password: '',
        code: ''
      },
      EditPasswordRules: {
        phonenumber: [{ required: true, trigger: 'blur', }],
        password: [{ required: true, trigger: 'blur' }],
        code: [{ required: true, trigger: 'blur' }]
      },
      EditMobileDialogVisible: false,
      MobileForm: {
        phonenumber: '',
        code: '',
        newphonenumber: '',
        newcode: ''
      },
      EditMobileRules: {
        phonenumber: [{ required: true, trigger: 'blur', }],
        code: [{ required: true, trigger: 'blur' }],
        newphonenumber: [{ required: true, trigger: 'blur', }],
        newcode: [{ required: true, trigger: 'blur' }]
      },
      isWait: false,
      sendWaitTime: 0
    }
  },
  components: {
    MineLeftNav,
    NavBar
  },
  created() {
    this.getCurrentUserInfo()
  },
  methods: {
    getCurrentUserInfo() {
      getInfo().then(res => {
        this.currentUserInfo = res.data
      })
    },
    resetPasswordForm() {
      this.PasswordForm = {
        phonenumber: '',
        password: '',
        code: ''
      }
    },
    resetEditMobileForm() {
      this.MobileForm = {
        phonenumber: '',
        code: '',
        newphonenumber: '',
        newcode: ''
      }
    },
    sendEditPasswordCode() {
      let that = this;
      sendCode({ phonenumber: this.PasswordForm.phonenumber }).then(res => {
        if (res.result === 1) {
          this.$notify({
            title: '获取成功',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
          that.isWait = true;
          that.sendWaitTime = 60 ;
          that.timeDown()
        } else {
          this.$notify({
            title: '获取失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    sendOldMobileCode() {
      let that = this;
      sendCode({ phonenumber: this.MobileForm.phonenumber }).then(res => {
        if (res.result === 1) {
          this.$notify({
            title: '获取成功',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
          that.isWait = true;
          that.sendWaitTime = 60 ;
          that.timeDown()
        } else {
          this.$notify({
            title: '获取失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    sendNewMobileCode() {
      let that = this;
      sendCode({ phonenumber: this.MobileForm.phonenumber }).then(res => {
        if (res.result === 1) {
          this.$notify({
            title: '获取成功',
            message: res.msg,
            type: 'success',
            duration: 2000
          })
          that.isWait = true;
          that.sendWaitTime = 60 ;
          that.timeDown()
        } else {
          this.$notify({
            title: '获取失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    timeDown(){
      let that = this;
      if(this.sendWaitTime<=0){
        that.isWait = false;
      }else{
        this.sendWaitTime -- ;
        setTimeout(() => {
          that.timeDown()
        }, 1000);
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(() => {
        done();
      }).catch(() => {});
    },
    handleEditMobileClose(done) {
      this.$confirm('确认关闭？').then(() => {
        done();
      }).catch(() => {});
    },
    updatePassword() {
      editPassword(this.PasswordForm).then(res => {
        if (res.result === 1) {
          this.$notify({
            title: '修改成功',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
          this.dialogVisible = false
        } else {
          this.$notify({
            title: '修改失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    updateMobile() {
      editPhone(this.MobileForm).then(res => {
        if (res.result === 1) {
          this.$notify({
            title: '修改成功',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
          this.dialogVisible = false
        } else {
          this.$notify({
            title: '修改失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    logout() {
      removeToken()
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="scss" scoped>
.touxiang img {
  width: 3.6875rem;
  height: 3.6875rem;
  border-radius: 100%;
}
</style>